<template>
    <div style="width: 100%;height: 560px">
        <el-tooltip
            effect="dark"
            :content="tooltipContent"
            placement="top"
        >
            <el-button
                style="margin-bottom: 15px"
                type="primary"
                icon="el-icon-picture-outline-round"
                circle
                @click="changeViewData"
            />
        </el-tooltip>

        <el-select
            v-if=!isView
            v-model="proId"
            filterable
            style="width: 360px"
            clearable
            @change="getPro"
            placeholder="试试搜索吧~">
            <el-option-group
                v-for="group in proOptions"
                :key="group.professionalTypeName"
                :label="group.professionalTypeName">
                <el-option
                    v-for="item in group.professions"
                    :key="item.proName"
                    :label="item.proName"
                    :value="item.proId">
                </el-option>
            </el-option-group>
        </el-select>

        <el-select
            v-if=isView
            v-model="classId"
            style="width: 360px"
            filterable
            @change="getClass"
            clearable
            placeholder="试试搜索吧~">
            <el-option
                v-for="item in classOptions"
                :key="item.className"
                :label="item.className"
                :value="item.classId">
            </el-option>
        </el-select>

        <v-chart
            :options="polar"
            autoresize
            id="sexRatio"
            ref="sexRatioRef"
            style="height: 90%;width: 100%"
        ></v-chart>
    </div>
</template>

<script>
import chinaMap from '../../assets/js/china'
export default {
  name: 'WorkArea',
    data () {
        return {
            polar: {},
            isView: true,
            placeholder: '试试搜索专业名称吧',
            tooltipContent: '切换到班级数据显示',
            cascaderOptions: [], // 专业班级联动菜单数据
            cascaderValues: [], // 专业班级联动菜单值
            classOptions: [],
            proOptions: [],
            classId: '',
            proId: '',
            type: 'getPro', // 获取数据的类型,
            dataList:[]
        }
    },
    watch:{
        dataList:function () {
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (!params.value){
                            params.value = 0
                        }
                        return params.name + "  " +  params.value+"人";//自行定义formatter格式
                    }
                },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],//取值范围的文字
                    inRange: {
                        color: ['#e0ffff', '#006edd']//取值范围的颜色
                    },
                    show: true//图注
                },
                geo: {
                    map: 'china',
                    roam: false,//不开启缩放和平移
                    zoom: 1.23,//视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)'
                        }, emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            areaColor: '#F3B329',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series: [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data: this.dataList
                    }
                ]

            }
            this.polar = option
        }
    },
    created () {
        this.getProfessionAndClassesDataCascaderOptions()
        this.getProfessionAndClassesLevelDataCascaderOptions()
        this.getWorkAreaData()
    },
  methods: {
    /** 获取学生工作区域数据 */
    async getWorkAreaData () {
        let self = this
        let data1 = {}
        data1.classId = ''
        data1.proId = ''
        let type = this.type
        if (type === 'getPro') {
            data1.proId = this.proId
        }
        if (type === 'getClass') {
            data1.classId = this.classId
        }

      // 提交表单
      const result = await this.$http.post('/data/getWorkMap', data1)
      // 判断业务逻辑
        self.dataList = result.data.data;
        let dataList = result.data.data; // 该数据是从服务器获取到的数据

        let option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name;//自行定义formatter格式
                }
            },
            visualMap: {
                min: 0,
                max: 1500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],//取值范围的文字
                inRange: {
                    color: ['#e0ffff', '#006edd']//取值范围的颜色
                },
                show: true//图注
            },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom: 1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)'
                    }, emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series: [
                {
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    data: dataList
                }
            ]

        }
        this.polar = option
    },

      changeViewData () {
          // true就是专业，false就是班级
          if (this.isView) {
              this.isView = false
              this.placeholder = '试试搜索班级名吧'
              this.tooltipContent = '切换到专业数据显示'
              this.type = 'getPro'
              this.getWorkAreaData()
          } else {
              this.isView = true
              this.placeholder = '试试搜索专业名吧'
              this.tooltipContent = '切换到班级数据显示'
              this.type = 'getClass'
              this.getWorkAreaData()
          }
      },
      getPro () {
          let self = this
          self.type = 'getPro'
          self.getWorkAreaData()
      },
      getClass () {
          let self = this
          self.type = 'getClass'
          self.getWorkAreaData()
      },
      /** 获取专业 */
      getProfessionAndClassesDataCascaderOptions () {
          let self = this
          self.utils.sendReq({
              queryUrl: 'professionalType/queryAll',
              req: {
                  method: 'get',
                  success: function (req) {
                      if (req.data.code === 200) {
                          self.proOptions = req.data.data
                      }
                  }
              }
          })
      },

      /** 获取班级 */
      getProfessionAndClassesLevelDataCascaderOptions () {
          let self = this
          self.utils.sendReq({
              queryUrl: 'classRoom/queryAll',
              req: {
                  method: 'get',
                  success: function (req) {
                      if (req.data.code === 200) {
                          self.classOptions = req.data.data
                      }
                  }
              }
          })
      }
  }
}
</script>

<style lang="less" scoped>
</style>
